vue-adaptive-mobile-phone

简介：在运用 Vue 编写手机端的页面，常常会遇到实际情况和编写出的代码相差较大，且在电脑页面展示时，容易与手机端产生误差。为了让减少后期调试时间，可以提前运用相关技术来运用手机真机在测试代码

#一.vue 适配手机端(lib-flexible)

#1.安装插件：

#2.在 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

#3.在 index.html 中添加 meta 标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

#4.更改配置

在 build/util.js 文件中 修改

#（1）将 px2rem-loader 添加到 cssLoaders 中

const px2remLoader = { loader: 'px2rem-loader', options: { //一般设置75 remUnit: 35 } }

#(2) 在 generateLoaders 方法中添加 px2remLoader

#二.用手机真机进行项目预览

#1.手机和开发项目的电脑要处于同一个 wifi 环境下，

#2.ipconfig 查看电脑的 IP 地址

#3.打开自己项目中的 package.json 添加 --host 指令

#4.运行项目，将网页用手机打开，即可看到效果

电脑端

手机端

添加手机端适配后的手机界面

#注：

1. 在添加了 --host 指令后，再运行项目的时候，打开的地址必须是本机 IP 地址，加端口号，不然就会出现 无法访问此网站的问题。

2. 在运行项目的时候一定的查看电脑 ip 地址和项目中 --host 中的地址一致，否则将无法打开网页。

3. 如果做手机端的页面时，记得一定要到手机真机测试！！（血泪教训呀）

(最开始查找关于 vue 适配手机端的资料的时候，一顿操作后，毫无感觉，然后我再尝试找找在手机端查看项目的资料。没想到在手机真机测试的时候效果明显了很多。如果有不对的地方，欢迎指出)